﻿<html>

<head>
  <meta charset="utf-8">
  <title>jQuery Wookmark Load 瀑布流布局 &raquo; PHP 加载数据 &raquo; 在线演示 - 前端开发仓库</title>
  <link rel="stylesheet" href="http://code.ciaoca.com/static/css/base.css">
  <link rel="stylesheet" href="http://code.ciaoca.com/static/css/demo.css">
  <link rel="stylesheet" href="http://code.ciaoca.com/jquery/wookmark/demo/css/layout.css">
  <style>
    /**
* Grid items
*/

    #tiles li {
      opacity: 0;
      -webkit-transition: all 0.8s ease-out;
      -moz-transition: all 0.8s ease-out;
      -o-transition: all 0.8s ease-out;
      transition: all 0.8s ease-out;
    }

  </style>
</head>

<body>
  <div class="wrap">
    <!-- <div class="side">
      <div class="logo">
        <a href="/" target="_blank">前端开发仓库</a>
        <em>在线演示</em>
      </div>
      <dl class="about">
        <dt>关于</dt>
        <dd>
          <a target="_blank" href="http://www.wookmark.com/jquery-plugin">作者</a>
        </dd>
        <dd>
          <a target="_blank" href="https://github.com/germanysbestkeptsecret/Wookmark-jQuery">Github</a>
        </dd>
        <dd>
          <a target="_blank" href="http://code.ciaoca.com/jquery/wookmark/">中文文档</a>
        </dd>
      </dl>
      <div id="nav" class="nav">
        <dl>
          <dt>示例</dt>
          <dd>
            <a href="./" title="基本示例">example</a>
          </dd>
          <dd>
            <a href="./amd" title="支持 AMD 规范">AMD</a>
          </dd>
          <dd>
            <a href="./endless-scroll" title="无限滚动">endless scroll</a>
          </dd>
          <dd>
            <a href="./flexible" title="弹性布局">flexible width</a>
          </dd>
          <dd>
            <a href="./lightbox" title="支持灯窗插件">lightbox</a>
          </dd>
          <dd>
            <a href="./load-images" title="动态读取图片尺寸">load it all</a>
          </dd>
          <dd>
            <a href="./placeholder" title="底部占位符">placeholders</a>
          </dd>
        </dl>
        <dl>
          <dt>动态加载数据</dt>
          <dd>
            <a href="./server" title="PHP 加载数据">PHP server</a>
          </dd>
          <dd>
            <a href="./api" title="远程 API 加载数据">remote API</a>
          </dd>
        </dl>
        <dl>
          <dt>筛选功能</dt>
          <dd>
            <a href="./filter-or">filter or</a>
          </dd>
          <dd>
            <a href="./filter-and">filter and</a>
          </dd>
          <dd>
            <a href="./filter-only">filter only</a>
          </dd>
          <dd>
            <a href="./filter-fade">filter fade style</a>
          </dd>
        </dl>
        <dl>
          <dt>排序功能</dt>
          <dd>
            <a href="./sort" title="排序">sorting</a>
          </dd>
          <dd>
            <a href="./stamp" title="排序标记">stamping</a>
          </dd>
        </dl>
      </div>
    </div> -->
    <div class="main">
      <div class="inwrap">
        <h1>jQuery Wookmark Load 瀑布流布局</h1>
        <h2>PHP 加载数据</h2>

        <div class="detail">
          <p>向下滚动可以加载更多，内容通过服务器输出获取。</p>
        </div>

        <div class="example">
          <div id="main" role="main">
            <ul id="tiles">
              <!-- These is where we place content loaded from the Wookmark API -->
            </ul>

            <div id="loader">
              <div id="loaderCircle"></div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

  <script src="http://code.ciaoca.com/static/js/highlight/highlight.pack.js"></script>
  <script src="http://code.ciaoca.com/static/js/controller/demo.js"></script>
  <script src="http://code.ciaoca.com/static/js/jquery/jquery-1.10.2.min.js"></script>
  <script src="http://code.ciaoca.com/jquery/wookmark/demo/js/jquery.imagesloaded.js"></script>
  <script src="http://code.ciaoca.com/jquery/wookmark/demo/js/jquery.wookmark.min.js"></script>
  <script>
    (function ($) {
      var $tiles = $('#tiles'),
        $handler = $('li', $tiles),
        page = 1,
        isLoading = false,
        apiURL = '/api/server-get.php',
        lastRequestTimestamp = 0,
        fadeInDelay = 2000,
        $window = $(window),
        $document = $(document);

      // Prepare layout options.
      var options = {
        autoResize: true, // This will auto-update the layout when the browser window is resized.
        container: $('#tiles'), // Optional, used for some extra CSS styling
        offset: 2, // Optional, the distance between grid items
        itemWidth: 210 // Optional, the width of a grid item
      };

      /**
       * When scrolled all the way to the bottom, add more tiles.
       */
      function onScroll(event) {
        // Only check when we're not still waiting for data.
        if (!isLoading) {
          // Check if we're within 100 pixels of the bottom edge of the broser window.
          var closeToBottom = ($window.scrollTop() + $window.height() > $document.height() - 100);
          if (closeToBottom) {
            // Only allow requests every second
            var currentTime = new Date().getTime();
            if (lastRequestTimestamp < currentTime - 1000) {
              lastRequestTimestamp = currentTime;
              loadData();
            }
          }
        }
      };

      /**
       * Refreshes the layout.
       */
      function applyLayout($newImages) {
        options.container.imagesLoaded(function () {
          // Destroy the old handler
          if ($handler.wookmarkInstance) {
            $handler.wookmarkInstance.clear();
          }

          // Create a new layout handler.
          $tiles.append($newImages);
          $handler = $('li', $tiles);
          $handler.wookmark(options);

          // Set opacity for each new image at a random time
          $newImages.each(function () {
            var $self = $(this);
            window.setTimeout(function () {
              $self.css('opacity', 1);
            }, Math.random() * fadeInDelay);
          });
        });
      };

      /**
       * Loads data from the API.
       */
      function loadData() {
        isLoading = true;
        $('#loaderCircle').show();

        $.ajax({
          url: apiURL,
          dataType: 'json', // Set to jsonp if you use a server on a different domain and change it's setting accordingly
          data: {
            page: page
          }, // Page parameter to make sure we load new data
          success: onLoadData
        });
      };

      /**
       * Receives data from the API, creates HTML for images and updates the layout
       */
      function onLoadData(response) {
        isLoading = false;
        $('#loaderCircle').hide();

        // Increment page index for future calls.
        page++;

        // Create HTML for the images.
        var html = '',
          data = response.data,
          i = 0,
          length = data.length,
          image, opacity,
          $newImages;

        for (; i < length; i++) {
          image = data[i];

          html += '<li>';
          html += '<a target="_blank" href="' + image.image + '" title="' + image.title + '">';
          // Image tag (preview in Wookmark are 200px wide, so we calculate the height based on that).
          html += '<img src="' + image.preview + '" width="200" height="' + Math.round(image.height / image.width *
            200) + '">';
          html += '</a>';
          // Image title.
          html += '<p>' + image.title + '</p>';
          html += '</li>';
        }

        $newImages = $(html);

        // Disable requests if we reached the end
        if (response.message == 'No more pictures') {
          $document.off('scroll', onScroll);
        }

        // Apply layout.
        applyLayout($newImages);
      };

      // Capture scroll event.
      $document.on('scroll', onScroll);

      // Load first data from the API.
      loadData();
    })(jQuery);

  </script>

 
</body>

</html>
